<!-- 发布房源(商家 经纪人) -->
<template>
  <div class="box">
    <heads></heads>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <div :class="index == 0 ? 'xuan' : 'ti'" @click="xclick(0)">
          发布房源
        </div>
        <div :class="index == 1 ? 'xuan' : 'ti'" @click="xclick(1)" v-if="user.isShop == 1">
          门店轮播
        </div>
        <!-- <div
          :class="index == 2 ? 'xuan' : 'ti'"
          @click="xclick(2)"
          v-if="user.isShop == 1"
        >
          门店资讯
        </div> -->
        <!-- <div class="but" @click="showCode()">下载帮帮同城app</div> -->
        <downloadAppBtn></downloadAppBtn>
      </div>
    </div>
    <transition name="el-fade-in">
      <div class="erweima" v-if="ewmStatus">
        <div><img src="../../assets/android.png" /><span>安卓</span></div>
        <div><img src="../../assets/iosDown.png" /><span>IOS</span></div>
        <i class="el-icon-close" style="
            position: absolute;
            top: 3px;
            color: #000;
            font-size: 20px;
            right: 20px;
          " @click="yc()"></i>
      </div>
    </transition>
    <!-- 发布房源 -->
    <div class="zbc" v-if="zbc">
      <div class="louceng">
        <div class="lou">
          <span>楼层</span>
          <div :class="lou == 1 ? 'xuan' : ''" @click="louXuan(1)">单层</div>
          <div :class="lou == 2 ? 'xuan' : ''" @click="louXuan(2)">多层</div>
          <div :class="lou == 3 ? 'xuan' : ''" @click="louXuan(3)">独栋</div>
        </div>
        <div class="ceng">
          <div v-if="lou != 3" style="margin-left: 15px">
            <el-select v-model="lou1" placeholder="请选择">
              <el-option :label="item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
          <span v-if="lou == 2" style="margin-left: 5px; margin-right: 5px">至</span>
          <div v-if="lou == 2">
            <el-select v-model="lou2" placeholder="请选择">
              <el-option :label="item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 25px">
            <el-select v-model="lou3" placeholder="请选择">
              <el-option :label="'共' + item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
        </div>
        <div class="wanc" @click="wancheng">完成</div>
      </div>
    </div>
    <el-tabs v-model="activeName" v-if="index == 0" style="left: 32%">
      <el-tab-pane label="出售发布" name="first">
        <sellfrom @onubmit="onSubmit" @ondrafts="onDrafts" :edit="editData" v-if="activeName == 'first'"></sellfrom>
      </el-tab-pane>
      <el-tab-pane label="出租发布" name="second">
        <rentfrom @onubmit="onSubmit" @ondrafts="onDrafts" :edit="editData" v-if="activeName == 'second'"></rentfrom>
      </el-tab-pane>
    </el-tabs>

    <!-- 发布轮播 -->
    <div style="
        width: 900px;
        margin: auto;
        display: flex;
        flex-direction: column;
        margin-top: 51px;
      " v-if="index == 1">
      <div class="house_typeform" v-if="!mdlbChage">
        <div class="Hform">
          <!-- <div
            style="
              width: 105px;
              height: 35px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 6px;
              cursor: pointer;
              border: #64b6a8 2px solid;
              color: #64b6a8;
              margin-bottom: 10px;
            "
            @click="storeThemClick"
          >
            <div style="font-size: 25px; margin-bottom: 4px">+</div>
            <div style="font-size: 16px">新增信息</div>
          </div> -->
          <!-- <el-table :data="mdlbList" border style="width: 100%">
					<el-table-column
					prop="title"
					label="标题"
					width="200"
					></el-table-column>
					<el-table-column
					prop="content"
					label="内容"
					width="200"
					></el-table-column>
					<el-table-column
					label="图片/视频"
					width="270">
						<template slot-scope="scope">
							<div style="text-align: center;" v-if="scope.row.remarks==1"><img :src="scope.row.image" style="width:50px;height:50px;" alt=""></div>
							<video v-if="scope.row.remarks==2" style="width:80px;height:100px;" :src="scope.row.image" controls="controls">您的浏览器不支持视频播放</video>
						</template>
					</el-table-column>
					<el-table-column prop="auditStatus" label="状态" width="206">
						<template slot-scope="scope">
							<span v-if="scope.row.auditStatus == 0">审核中</span>
							<span v-if="scope.row.auditStatus == 1">通过</span>
							<span v-if="scope.row.auditStatus == 2">拒绝</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
						type="text"
						size="small"
						@click="carouselsupdate(scope.row)"
						>编辑</el-button
						>
						<el-button
						type="text"
						size="small"
						@click="storeThemDelet(scope.row.id)"
						>删除</el-button
						>
					</template>
					</el-table-column>
				</el-table>
				</div>
				<div class="Hpage">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="mdlbTotal"
					:page-size="mdlbData.pageSize"
					:current-change="mdlbData.pageNo"
					@current-change="storeThemChage"
				>
				</el-pagination> -->
          <template v-for="(video, i) in mdlbObj.videoList">
            <div class="li tuLi">
              <div class="left" style="color: #333333">
                <span>*</span>门店视频
              </div>
              <div class="tu">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :disabled="true"
                  @click.native="!video.image && goAdd('video', i)">
                  <video :src="video.image" style="height: 100%; width: 100%" alt="" v-if="video.image" />
                  <i class="el-icon-plus" v-if="!video.image"></i>
                </el-upload>
                <div class="info" v-if="video.id">
                  <template v-if="video.auditStatus == '0'">
                    <div class="info-title">审核中</div>
                  </template>
                  <template v-if="video.auditStatus == '2'">
                    <div class="info-title">拒绝</div>
                  </template>
                  <template v-if="video.auditStatus == '1'">
                    <div class="info-title">通过</div>
                  </template>

                  <div class="info-desc txt2">{{ video.title || "" }}</div>
                  <div class="info-operate">
                    <el-button type="danger" size="mini" @click="storeThemDelet(video.id)">删除</el-button>
                    <el-button type="success" size="mini" @click="carouselsupdate(video, 'video', i)">编辑</el-button>
                  </div>
                </div>
                <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog> -->
              </div>
            </div>
          </template>

          <div class="li tuLi" style="padding-bottom: 32px">
            <div class="left" style="color: #333333">
              <span>*</span>门店图片
            </div>
            <div class="tu-wrap">
              <template v-for="(img, i) in mdlbObj.imgList">
                <div class="tu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                    :disabled="true" @click.native="!img.image && goAdd('image', i)">
                    <img :src="img.image" style="height: 100%; width: 100%" alt="" v-if="img.image" />
                    <i class="el-icon-plus" v-if="!img.image"></i>
                  </el-upload>
                  <div class="info" v-if="img.id">
                    <template v-if="img.auditStatus == '0'">
                      <div class="info-title">审核中</div>
                    </template>
                    <template v-if="img.auditStatus == '2'">
                      <div class="info-title">拒绝</div>
                    </template>
                    <template v-if="img.auditStatus == '1'">
                      <div class="info-title">通过</div>
                    </template>
                    <div class="info-desc txt2">{{ img.title || "" }}</div>
                    <div class="info-operate">
                      <el-button type="danger" size="mini" @click="storeThemDelet(img.id)">删除</el-button>
                      <el-button type="success" size="mini" @click="carouselsupdate(img, 'image', i)">编辑</el-button>
                    </div>
                  </div>
                  <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog> -->
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="mdlbChage">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <!-- <template v-if="ifVideo != 1">
            <div style="color: #000000; font-size: 20px; font-weight: 600">
              内容分类
            </div>
            <el-select
              style="width: 130px"
              v-model="fenlei"
              placeholder="请选择"
            >
              <el-option
                v-for="item in fenleiList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template> -->
          <el-input type="text" placeholder="请输入标题" v-model="title" maxlength="50" show-word-limit style="width: 642px"
            v-if="fenlei == 1">
          </el-input>
          <div v-if="fenlei == 2" style="width: 642px"></div>
        </div>
        <el-input type="textarea" placeholder="请输入内容" maxlength="300" v-model="content" show-word-limit
          style="margin-top: 40px; height: 130px" class="neirong" v-if="fenlei == 1">
        </el-input>
        <div class="tu" style="margin-top: 24px" v-if="fenlei == '1'">
          <el-upload :action="$upLoad" :list-type="carouselImg == '' ? 'picture-card' : ''" :on-success="carouselSuccess"
            :on-remove="carouselRemove" :limit="1" ref="upload7" :on-change="carouseluploadFile" :auto-upload="false">
            <i class="el-icon-plus" v-if="carouselImg == ''"></i>
            <img :src="carouselImg" style="
                width: 150px;
                height: 150px;
                object-fit: contain;
                cursor: pointer;
                background-color: #fff;
              " v-if="carouselImg !== ''" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
        <div class="tu" style="text-align: center; margin-top: 30px" v-if="fenlei == '2'">
          <el-upload :action="$upLoad" :show-file-list="false" :list-type="houseVideo.length == 0 ? 'picture-card' : ''"
            :on-success="houseVideoSuccess" :before-upload="beforeUploadVideo" :on-remove="houseVideoRemove"
            :on-progress="uploadVideoProcess" :file-list="echoVideo">
            <video v-if="houseVideo.length > 0 && videoFlag == false" :src="houseVideo[0].path" class="avatar"
              style="height: 165px" controls="controls">
              您的浏览器不支持视频播放
            </video>
            <i v-if="houseVideo.length == 0 && videoUploadPercent == 0" class="el-icon-plus"></i>
            <el-progress v-if="videoUploadPercent > 0" type="circle" :percentage="videoUploadPercent"
              style="margin-top: 10px"></el-progress>
          </el-upload>
        </div>
        <div class="xieyi" v-if="index != 0">
          <el-checkbox v-model="xieyistate"></el-checkbox>
          <p>
            发布即默认同意
            <!-- <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(7)">《房屋委托出售协议》</span>
					<span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)">《隐私权政策》</span> -->
            <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(3)">《帮帮同城用户协议》</span>
            <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(2)">《帮帮同城隐私政策》</span>
          </p>
        </div>
        <!-- <div class="queding" @click="onSubmit" v-if="index == 0">确认发布</div> -->
        <div class="queding" v-if="mdlbStatus == 1" :style="houseVideo.length <= 0 ? 'backgroundColor:#cccccc' : ''"
          @click="twoSubmit(true)">
          提交
        </div>
        <div class="queding" v-else-if="mdlbStatus == 2" @click="modificationSubmit(true)">
          修改
        </div>
        <div class="queding" @click="storeThemClick">返回</div>
      </div>
    </div>
    <!-- 门店信息修改 -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div style="
        width: 900px;
        margin: auto;
        display: flex;
        flex-direction: column;
        margin-top: 51px;
      " v-if="index == 2">
      <div class="house_typeform" v-if="!mdzxChage">
        <div class="Hform">
          <div style="
              width: 105px;
              height: 35px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 6px;
              cursor: pointer;
              border: #64b6a8 2px solid;
              color: #64b6a8;
              margin-bottom: 10px;
            " @click="storesConsultClick">
            <div style="font-size: 25px; margin-bottom: 4px">+</div>
            <div style="font-size: 16px">新增信息</div>
          </div>

          <!-- <div class="li tuLi">
                <div class="left" style="color: #333333">
                  <span>*</span>门店资讯
                </div>
				<template v-for="(img, i) in mdzxList">
                <div class="tu"
				          @click="!img.image&&storesConsultClick(i)">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :disabled="true"

                  >
				  	<img :src="img.image" style="height:100%;width:100%" alt="" v-if="img.image"/>
                    <i class="el-icon-plus" v-if="!img.image"></i>
                  </el-upload>
                  <div class="info">
					<template v-if="img.auditStatus == '0'">
						<div class="info-title">审核中</div>
					</template>
                    <template v-if="img.auditStatus == '2'">
						<div class="info-title">拒绝</div>
					</template>
                    <template v-if="img.auditStatus == '1'">
                      <div class="info-title">{{ img.title || "" }}</div>
                      <div class="info-desc txt2">{{ img.content || "" }}</div>
                      <div class="info-operate">
						<el-button type="danger" size='mini' @click="storesConsultDelet(img.id)">删除</el-button>
        <el-button type="success" size='mini' @click="informaupdate(img,i)">编辑</el-button>
					  </div>
                    </template>
				  </div>

                </div>
				</template>
              </div> -->
          <el-table :data="mdzxList" border style="width: 100%">
            <el-table-column prop="title" label="标题" width="200"></el-table-column>
            <el-table-column prop="content" label="内容" width="200"></el-table-column>
            <el-table-column label="图片" width="270">
              <template slot-scope="scope">
                <div style="text-align: center">
                  <img :src="scope.row.image" style="width: 50px; height: 50px" alt="" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="状态" width="206">
              <template slot-scope="scope">
                <span v-if="scope.row.auditStatus == 0">审核中</span>
                <span v-if="scope.row.auditStatus == 1">通过</span>
                <span v-if="scope.row.auditStatus == 2">拒绝</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="informaupdate(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="storesConsultDelet(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="Hpage">
          <el-pagination background layout="prev, pager, next" :total="mdzxTotal" :page-size="mdzxData.pageSize"
            :current-change="mdzxData.pageNo" @current-change="storesConsultChage">
          </el-pagination>
        </div>
      </div>
      <div v-if="mdzxChage">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <el-input type="text" placeholder="请输入标题" v-model="mdzxAddData.title" maxlength="50" show-word-limit
            style="width: 642px">
          </el-input>
        </div>
        <el-input type="textarea" placeholder="请输入内容" maxlength="300" v-model="mdzxAddData.content" show-word-limit
          style="margin-top: 40px; height: 130px" class="neirong">
        </el-input>
        <div class="tu" style="margin-top: 24px">
          <el-upload :action="$upLoad" :list-type="informationImg == '' ? 'picture-card' : ''"
            :on-success="informationSuccess" :on-remove="informationRemove" :limit="1" ref="upload8"
            :on-change="informationuploadFile" :auto-upload="false">
            <i class="el-icon-plus" v-if="informationImg == ''"></i>
            <img :src="informationImg" style="
                width: 150px;
                height: 150px;
                object-fit: contain;
                cursor: pointer;
                background-color: #fff;
              " v-if="informationImg !== ''" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
        <div class="xieyi" v-if="index != 0">
          <el-checkbox v-model="xieyistate"></el-checkbox>
          <p>
            发布即默认同意
            <!-- <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(7)">《房屋委托出售协议》</span>
					<span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)">《隐私权政策》</span> -->
            <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(3)">《帮帮同城用户协议》</span>
            <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(2)">《帮帮同城隐私政策》</span>
          </p>
        </div>
        <!-- <div class="queding" @click="onSubmit" v-if="index == 0">确认发布</div> -->
        <div class="queding" v-if="mdzxStatus == 1" @click="twoSubmit(false)">
          提交
        </div>
        <div class="queding" v-else-if="mdzxStatus == 2" @click="modificationSubmit(false)">
          修改
        </div>
        <div class="queding" @click="storesConsultClick">返回</div>
      </div>
    </div>
    <el-dialog title="图片" :visible.sync="informationFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper autoCrop :fixedBox="informationoption.fixedBox" :fixed="informationoption.fixed"
          :fixedNumber="informationoption.fixedNumber" :img="informationshowImg" ref="informationcropper" centerBox />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="informationFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="informationfirmnn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="图片" :visible.sync="carouselFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper autoCrop :fixedBox="carouseloption.fixedBox" :fixed="carouseloption.fixed"
          :fixedNumber="carouseloption.fixedNumber" :img="carouselshowImg" ref="carouselcropper" centerBox />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="carouselFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="carouselfirmnn">确 定</el-button>
      </div>
    </el-dialog>
    <floor></floor>
  </div>
</template>

<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import sellfrom from "../../components/sellfrom.vue";
import rentfrom from "../../components/rentfrom.vue";
import axios from "axios";
export default {
  components: {
    floor,
    heads,
    sellfrom,
    rentfrom,
  },
  data() {
    return {
      activeName: "first",
      ewmStatus: false,
      content: "",
      index: 0,
      year1: "",
      year2: "",
      yearVisible: false,
      xieyistate: true,
      lou1: "",
      lou2: "",
      lou3: "",
      nature: "",
      type: "住宅",
      typeNum: 1,
      xuan: "",
      danxuan: "",
      nianliat: [],
      nian: "",
      dialogImageUrl: "",
      dialogVisible: false,
      houseIntroduce: "",
      checkedCities: [],
      zbc: false,
      lou: 1,
      cengList: [],
      type7: [],
      type6: [],
      type4: [],
      type3: [],
      type15: [],
      title: "", //标题
      region: "", //区域
      cellName: "", //小区名称
      address: "", //地址
      longitude: "", //经度
      latitude: "", //纬度
      newOld: 0, //类型 1新 2旧
      price: "", //售价
      area: "", //面积
      houseType: "", //户型
      years: "", //年代
      floor: "", //楼层
      renovation: "", //装修
      elevator: "", //电梯
      phone: "", //联系方式
      houseImage: [],
      houseVideo: [],
      houseTypeImage: [],
      foortxt: "",
      useStatus: 0,
      workshopArea: "",
      fenlei: "1",
      fenleiList: [
        {
          value: "1",
          label: "图片",
        },
        {
          value: "2",
          label: "视频",
        },
      ],
      user: {},
      shopIntroduce: "",
      ImageList: [],
      editData: "",
      // 门店轮播
      mdlbChage: false,
      houseVideo: [],
      videoFlag: true,
      videoUploadPercent: 0,
      mdlbList: [],
      mdlbObj: {},
      mdlbData: {
        pageSize: 99,
        pageNo: 1,
        type: 2,
        shopId: "",
      },
      mdlbTotal: 0,
      echoImage: [],
      echoVideo: [],
      // 判断是修改还是新增
      mdlbStatus: 1,
      mdlbCarouselId: "",
      // 门店咨询
      mdzxChage: false,
      mdzxList: [],
      mdzxData: {
        pageSize: 5,
        pageNo: 1,
        type: 1,
        shopId: "",
      },
      mdzxTotal: 0,
      mdzxAddData: {
        title: "",
        content: "",
        houseImage: [],
      },
      zxhouseImage: [],
      // 判断是修改还是新增
      mdzxStatus: 1,
      mdzxCarouselId: "",
      informationshowImg: [],
      informationImg: "",
      informationFormVisible: false,
      informationoption: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [3, 2], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      carouselshowImg: [],
      carouselImg: "",
      carouselFormVisible: false,
      carouseloption: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [3, 2], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      ifVideo: 0,
      objIndex: {},
      curIndex: 0,
    };
  },
  watch: {
    index(newId, oldId) {
      if (newId) return;
      if (this.objIndex[newId]) {
        this.curIndex = objIndex[newId];
      }
    },
  },
  mounted() {
    for (let i = 1; i < 41; i++) {
      this.cengList.push(i);
    }
    this.releaseNote();
  },
  created() {
    this.getUser();
    this.getDictionaries();

    if (this.$route.query.types) {
      console.log("111");
      // this.index==+this.$route.query.types
      this.xclick(+this.$route.query.types);
    }
    // 重新编辑
    // this.echoData();
  },
  methods: {
    // 门店轮播查询
    storeThemQuery() {
      if (this.mdlbChage) return;
      this.ifVideo = 0;
      this.mdlbData.shopId = this.user.shopId || this.user.enterpriseId;
      this.$getHttp("/mob/user/queryArticleInfo", this.mdlbData).then(
        (data) => {
          var obj = {};
          var imgList = [];
          imgList.push(...new Array(6).fill({}));
          var videoList = [{}];
          if (data.code == 200) {
            data.articleInfo.forEach((v) => {
              if (v.remarks == 2) {
                this.ifVideo = 1;
                videoList.pop();
                videoList.push(v);
              } else {
                imgList.splice(v.number || 0, 1, v);
              }
            });

            obj = {
              imgList: imgList,
              videoList: videoList,
            };
            // this.mdlbList = data.articleInfo
            // this.mdlbList = obj;
            this.mdlbObj = obj;
            console.log(this.mdlbObj);
            this.mdlbTotal = data.count;
          }
        }
      );
    },
    storeThemDelet(id) {
      this.$confirm("此操作将删除该轮播图片/视频, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$postHttp("/mob/user/deleteArticleInfos", { ids: id }).then(
            (data) => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.mdlbData.pageNo = 1;
                this.storeThemQuery();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    storeThemClick(feilei) {
      this.title = "";
      this.content = "";
      this.carouselImg = "";
      this.houseVideo = [];
      this.fenlei = feilei ? feilei : "1";
      this.mdlbChage = !this.mdlbChage;
      this.mdlbStatus = 1;
    },
    storeThemChage() {
      this.mdlbData.pageNo = e;
      this.storeThemQuery();
    },
    // 编辑
    carouselsupdate(item, mediaType, i) {
      this.mediaType = mediaType;
      if (i) {
        this.objIndex[this.titleIndex] = i;
        this.curIndex = i;
      }
      this.mdlbChage = true;
      this.mdlbStatus = 2;
      this.mdlbCarouselId = item.id;
      if (item.remarks == 1) {
        this.fenlei = "1";
        this.title = item.title;
        this.content = item.content;
        // this.echoImage=[]
        // this.houseImage=[]
        // this.echoImage.push({name:'1',url:item.image})
        // this.houseImage.push({id:'1',path:item.image})
        this.carouselImg = item.image;
      } else {
        this.fenlei = "2";
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        this.echoVideo = [];
        this.houseVideo = [];
        this.echoVideo.push({ name: "1", url: item.image });
        this.houseVideo.push({ id: "1", path: item.image });
      }
    },
    // 门店咨询查询
    storesConsultQuery() {
      if (this.mdzxChage) return;
      this.mdzxData.shopId = this.user.shopId || this.user.enterpriseId;
      this.$getHttp("/mob/user/queryArticleInfo", this.mdzxData).then(
        (data) => {
          // var imgList = []
          //  imgList.push(...new Array(7).fill({}));
          if (data.code == 200) {
            console.log(data);
            // data.articleInfo.map((v)=>{
            //   imgList.splice(v.number||0,1,v)
            // })

            this.mdzxList = data.articleInfo;
            this.mdzxTotal = data.count;
          }
        }
      );
    },
    storesConsultDelet(id) {
      this.$confirm("此操作将删除该轮播图片/视频, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$postHttp("/mob/user/deleteArticleInfos", { ids: id }).then(
            (data) => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.mdzxData.pageNo = 1;
                this.storesConsultQuery();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 跳图片、视频
    goAdd(tag, i) {
      console.log("tag", tag);
      this.isFrom = tag;
      this.ifVideo = 1;
      if (tag == "video") {
        this.storeThemClick("2");
      } else {
        this.storeThemClick();
      }
      if (i) {
        this.objIndex[this.titleIndex] = i;
        this.curIndex = i;
      }
    },
    storesConsultClick(i) {
      if (i) {
        this.objIndex[this.titleIndex] = i;
        this.curIndex = i;
      }
      this.mdzxChage = !this.mdzxChage;
      this.mdzxAddData.title = "";
      this.informationImg = "";
      this.mdzxAddData.content = "";
      this.mdzxStatus = 1;
      console.log("tatagg", this.mdzxChage);
    },
    storesConsultChage() {
      this.mdzxData.pageNo = e;
      this.storesConsultQuery();
    },
    informaupdate(item, i) {
      if (i) {
        this.objIndex[this.titleIndex] = i;
        this.curIndex = i;
      }
      this.mdzxChage = true;
      this.mdzxStatus = 2;
      this.mdzxCarouselId = item.id;
      this.mdzxAddData.title = item.title;
      this.mdzxAddData.content = item.content;
      this.informationImg = "";
      // this.zxhouseImage=[]
      // this.mdzxAddData.houseImage.push({id:'1659348991231',path:item.image})
      this.informationImg = item.image;
      // this.zxhouseImage.push({name:'1',url:item.image})
    },
    releaseNote() {
      this.$getHttp("/mob/home/getNumCount", {
        userId: this.user.id,
      }).then((res) => {
        if (res.data.num >= res.data.limitQuantity) {
          this.$alert(
            `您发布的房源已达上限，超过限制的房源将处于下架状态，同时上架的房源不能超过（${res.data.limitQuantity}）套`,
            "提示",
            {
              confirmButtonText: "确定",
              callback: (action) => { },
            }
          );
        }
      });
    },
    echoData() {
      let editData = JSON.parse(localStorage.getItem("editData"));
      localStorage.removeItem("editData");
      if (editData) {
        if (editData.transaction_type == 1) {
          this.activeName = "second";
          this.editData = editData;
        } else {
          this.activeName = "first";
          this.editData = editData;
        }
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.user = user;
        console.log(user);
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    showCode() {
      console.log(111);
      this.ewmStatus = true;
    },
    yc() {
      console.log(222);
      this.ewmStatus = false;
    },
    toXieyi(id) {
      window.open(
        "https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id=" +
        id,
        "_blank"
      );
    },
    onSubmit(item) {
      if (item.is_drafts == 1) {
        this.$postHttp("/mob/home/deleteDraft", { ids: this.editData.id }).then(
          (data) => {
            delete item.is_drafts;
          }
        );
      }
      this.$postHttp("/mob/home/saveHouseInfo", item).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "发布成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.addIntegral(4, "发布房源");
          setTimeout(() => {
            this.$router.push({
              path: "/my/bbcz/wdRelease",
              query: {
                examineindex: "1",
              },
            });
          }, 500);
        }
      });
    },
    addIntegral(val, title) {
      this.$postHttp("/mob/iteration/addIntegral", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ruleNumber: val,
        title: title,
      }).then((res) => { });
    },
    onDrafts(item) {
      console.log(item);
      if (item.is_drafts == 1) {
        delete item.is_drafts;
        this.$postHttp("/mob/home/updateDraft", item).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "修改草稿成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push("/my/bbcz/wdRelease");
            }, 500);
          }
        });
      } else {
        delete item.id;
        delete item.is_drafts;
        item.oldHouseId = this.editData.id ? this.editData.id : "";
        this.$postHttp("/mob/home/saveAsDraft", item).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "存入草稿箱成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push("/my/bbcz/wdRelease");
            }, 500);
          }
        });
      }
    },
    xclick(index) {
      console.log("222", index);
      this.ImageList = [];
      this.index = index;
      if (index == 1) {
        this.storeThemQuery();
      } else if (index == 2) {
        //查询店铺信息
        // this.$getHttp('/mob/user/getShopInfoDetail',{id:this.user.shopId || this.user.enterpriseId}).then((data) =>{{
        // 	if(data.code == 200){

        // 		this.shopIntroduce = data.shopInfo.shopIntroduce
        // 		data.shopInfo.image.split('|').forEach((e) =>{
        // 			this.ImageList.push({
        // 				name:'file',
        // 				url:e
        // 			})
        // 		})
        // 		// this.ImageList =[{
        // 		// 	name:'file',
        // 		// 	url:this.$img+data.shopInfo.image
        // 		// }]
        // 	}
        // }})
        this.storesConsultQuery();
      }
    },
    async twoSubmit(type) {
      //提交门店资讯
      if (this.xieyistate) {
        if (type) {
          if (!(await this.authUser("房轮播"))) return;
          if (this.fenlei == 1) {
            if (
              this.title != "" &&
              this.content != "" &&
              this.carouselImg != ""
            ) {
              this.$postHttp("/mob/user/saveArticleInfo", {
                id: this.user.id,
                shopId: this.user.shopId || this.user.enterpriseId,
                title: this.title,
                image: this.carouselImg,
                content: this.content,
                type: 2,
                remarks: 1,
                businessType: this.user.businessType,
                number: this.curIndex || 0,
              }).then((data) => {
                if (data.code == 200) {
                  this.title = "";
                  this.carouselImg = "";
                  this.content = "";
                  this.fenlei = "1";
                  this.ImageList = [];
                  this.storeThemClick();
                  this.storeThemQuery();

                  // this.$refs.uploadImage.clearFiles();
                  this.$message({
                    message: "提交资讯成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                }
              });
            } else {
              this.$message({
                message: "请填写所有信息！",
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          } else {
            if (this.houseVideo.length != 0) {
              this.$postHttp("/mob/user/saveArticleInfo", {
                id: this.user.id,
                shopId: this.user.shopId || this.user.enterpriseId,
                image: this.houseVideo[0].path,
                businessType: this.user.businessType,
                type: 2,
                remarks: 2,
                number: this.curIndex || 0,
              }).then((data) => {
                if (data.code == 200) {
                  this.title = "";
                  this.houseImage = [];
                  this.content = "";
                  this.ImageList = [];
                  this.fenlei = "1";
                  this.storeThemClick();
                  this.storeThemQuery();

                  // this.$refs.uploadImage.clearFiles();
                  this.$message({
                    message: "提交资讯成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                }
              });
            } else {
              this.$message({
                message: "请填写所有信息！",
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          }
        } else {
          if (
            this.mdzxAddData.title != "" &&
            this.mdzxAddData.content != "" &&
            this.informationImg != ""
          ) {
            this.$postHttp("/mob/user/saveArticleInfo", {
              id: this.user.id,
              shopId: this.user.shopId || this.user.enterpriseId,
              title: this.mdzxAddData.title,
              image: this.informationImg,
              content: this.mdzxAddData.content,
              businessType: this.user.businessType,
              type: 1,
            }).then((data) => {
              if (data.code == 200) {
                this.mdzxAddData.title = "";
                this.informationImg = "";
                this.mdzxAddData.content = "";
                this.storesConsultClick();
                this.storesConsultQuery();

                // this.$refs.zxuploadImage.clearFiles();
                this.$message({
                  message: "提交资讯成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
              }
            });
          } else {
            this.$message({
              message: "请填写所有信息！",
              type: "error",
              offset: 120,
              duration: 2000,
            });
          }
        }
      } else {
        this.$message({
          message: "请勾选协议！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    // 修改门店信息
    async modificationSubmit(type) {
      //提交门店资讯
      if (this.xieyistate) {
        if (type) {
          if (!(await this.authUser("房轮播"))) return;
          if (this.fenlei == 1) {
            if (
              this.title != "" &&
              this.content != "" &&
              this.carouselImg != 0
            ) {
              this.$postHttp("/mob/user/updateArticleInfo", {
                id: this.mdlbCarouselId,
                title: this.title,
                image: this.carouselImg,
                content: this.content,
                type: 2,
                remarks: 1,
                number: this.curIndex || 0,
              }).then((data) => {
                if (data.code == 200) {
                  this.title = "";
                  this.carouselImg = "";
                  this.content = "";
                  this.ImageList = [];
                  this.storeThemClick();
                  this.storeThemQuery();

                  // this.$refs.uploadImage.clearFiles();
                  this.mdlbStatus = 1;
                  this.$message({
                    message: "修改资讯成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                }
              });
            } else {
              this.$message({
                message: "请填写所有信息！",
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          } else {
            if (this.houseVideo.length != 0) {
              this.$postHttp("/mob/user/updateArticleInfo", {
                id: this.mdlbCarouselId,
                image: this.houseVideo[0].path,
                type: 2,
                remarks: 2,
                number: this.curIndex || 0,
              }).then((data) => {
                if (data.code == 200) {
                  this.title = "";
                  this.houseImage = [];
                  this.content = "";
                  this.ImageList = [];
                  this.storeThemClick();
                  this.storeThemQuery();

                  this.mdlbStatus = 1;
                  // this.$refs.uploadImage.clearFiles();
                  this.$message({
                    message: "修改资讯成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                }
              });
            } else {
              this.$message({
                message: "请填写所有信息！",
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          }
        } else {
          if (
            this.mdzxAddData.title != "" &&
            this.mdzxAddData.content != "" &&
            this.informationImg != ""
          ) {
            this.$postHttp("/mob/user/updateArticleInfo", {
              id: this.mdzxCarouselId,
              title: this.mdzxAddData.title,
              image: this.informationImg,
              content: this.mdzxAddData.content,
              type: 1,
            }).then((data) => {
              if (data.code == 200) {
                this.mdzxAddData.title = "";
                this.informationImg = "";
                this.mdzxAddData.content = "";
                this.storesConsultClick();
                this.storesConsultQuery();

                this.$refs.zxuploadImage.clearFiles();
                this.mdzxStatus = 1;
                this.$message({
                  message: "修改资讯成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
              }
            });
          } else {
            this.$message({
              message: "请填写所有信息！",
              type: "error",
              offset: 120,
              duration: 2000,
            });
          }
        }
      } else {
        this.$message({
          message: "请勾选协议！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    //查询字典(区域)
    getDictionaries() {
      var that = this;
      this.$getHttp("/mob/home/getDictionaries", { type: "7,6,4,3,15" }).then(
        (data) => {
          if (data.code == 200) {
            data.list.forEach((el) => {
              if (el.type == 7) {
                that.type7.push(el);
              } else if (el.type == 6) {
                that.type6.push(el);
              } else if (el.type == 4) {
                that.type4.push(el);
              } else if (el.type == 3) {
                that.type3.push(el);
              } else if (el.type == 15) {
                that.type15.push(el);
              }
            });
          }
        }
      );
    },
    yearshow() {
      this.yearVisible = !this.yearVisible;
    },
    xuanlouceng() {
      this.lou1 = "";
      this.lou2 = "";
      this.lou3 = "";
      this.zbc = true;
    },
    wancheng() {
      this.zbc = false;
      let foorls = this.lou;
      if (this.lou1 != "") {
        foorls += "," + this.lou1;
      }
      if (this.lou2 != "") {
        foorls += "," + this.lou2;
      }
      if (this.lou3 != "") {
        foorls += "," + this.lou3;
      }
      this.foortxt = this.floorss(foorls);
      this.floor = foorls;
    },
    floorss(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    louXuan(num) {
      this.lou = num;
    },
    //数组转String
    arrToString(arr) {
      if (arr.length == 1) {
        return arr[0].url;
      } else {
        let str = [];
        arr.forEach((e) => {
          str.push(e.url);
        });
        return str.join("|");
      }
    },
    handleCommand(command) {
      this.type = command;
      if (command == "住宅") {
        this.typeNum = 1;
      } else if (command == "商铺") {
        this.typeNum = 2;
      } else if (command == "写字楼") {
        this.typeNum = 3;
      } else if (command == "厂房") {
        this.typeNum = 4;
      } else if (command == "土地") {
        this.typeNum = 5;
      } else if (command == "车位") {
        this.typeNum = 6;
      }
    },
    houseTypeRemove(file, fileList) {
      for (var i = 0; i < this.houseTypeImage.length; i++) {
        if (this.houseTypeImage[i].id == file.uid) {
          this.houseTypeImage.splice(i, 1);
        }
      }
    },
    houseRemove(file, fileList) {
      console.log(1111);
      for (var i = 0; i < this.houseImage.length; i++) {
        console.log(2222);
        if (this.houseImage[i].id == file.uid) {
          console.log(this.houseImage, i);
          this.houseImage.splice(i, 1);
        }
      }
    },
    house2Remove(file, fileList) {
      for (var i = 0; i < this.ImageList.length; i++) {
        if (this.ImageList[i].url == file.url) {
          this.ImageList.splice(i, 1);
        }
      }
    },
    houseTypeSuccess(response, file, fileList) {
      this.houseTypeImage.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    // 上传视频
    houseVideoSuccess(response, file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.houseVideo = [];
      this.houseVideo.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    beforeUploadVideo(file, fileList) {
      console.log(1111111111);
      if (file.size / (1024 * 1024) > 50) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于50M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb",
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
    houseVideoRemove(file, fileList) {
      for (var i = 0; i < this.houseVideo.length; i++) {
        if (this.houseVideo[i].id == file.uid) {
          this.houseVideo.splice(i, 1);
        }
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      console.log(file.percentage, "上传进度");
      this.videoUploadPercent = parseFloat(file.percentage.toFixed(0));
    },
    houseSuccess(response, file, fileList) {
      this.houseImage.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    house2Success(response, file, fileList) {
      console.log(response.data[0].url);
      this.ImageList.push({
        name: "file",
        url: response.data[0].url,
      });
    },
    consultRemove(file, fileList) {
      for (var i = 0; i < this.mdzxAddData.houseImage.length; i++) {
        console.log(2222);
        if (this.mdzxAddData.houseImage[i].id == file.uid) {
          this.mdzxAddData.houseImage.splice(i, 1);
        }
      }
    },
    consultSuccess(response, file, fileList) {
      this.mdzxAddData.houseImage.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    // 裁剪图片
    informationSuccess(response, file, fileList) {
      this.informationImg = response.data[0].url;
    },
    informationRemove(file, fileList) {
      this.informationImg = "";
    },
    informationuploadFile(file, fileList) {
      console.log(file, fileList);
      this.$refs.upload8.clearFiles();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过2M");
          return;
        }

        //    this.showImg =file.raw
        this.informationshowImg = URL.createObjectURL(file.raw);
        this.informationFormVisible = true;
      }
    },
    informationfirmnn() {
      this.informationFormVisible = false;
      this.informationCropData();
    },
    //裁剪圖片
    informationCropData() {
      let self = this;
      this.$refs.informationcropper.getCropData((data) => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.informationURLtoBlob(data)); // 通过append向form对象添加数据
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
        };
        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;
          if (response.code === 200) {
            self.informationImg = response.data[0].url;
          }
        });
      });
    },
    informationURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 裁剪图片
    carouselSuccess(response, file, fileList) {
      this.carouselImg = response.data[0].url;
    },
    carouselRemove(file, fileList) {
      this.carouselImg = "";
    },
    carouseluploadFile(file, fileList) {
      console.log(file, fileList);
      this.$refs.upload7.clearFiles();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过2M");
          return;
        }

        //    this.showImg =file.raw
        this.carouselshowImg = URL.createObjectURL(file.raw);
        this.carouselFormVisible = true;
      }
    },
    carouselfirmnn() {
      this.carouselFormVisible = false;
      this.carouselCropData();
    },
    //裁剪圖片
    carouselCropData() {
      let self = this;
      this.$refs.carouselcropper.getCropData((data) => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.carouselURLtoBlob(data)); // 通过append向form对象添加数据
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
        };
        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;
          if (response.code === 200) {
            self.carouselImg = response.data[0].url;
          }
        });
      });
    },
    carouselURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
};
</script>

<style lang="less" scoped>
.tu-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .tu {
    width: 33.33%;
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.Hform {
  position: relative;
  margin-left: 50%;
  font-size: 18px;
  transform: translateX(-50%);
  width: 1200px;
  border-radius: 6px 6px 0px 0px;
  overflow: hidden;

  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    text-align: center;
  }

  /deep/.el-table th.is-leaf {
    background-color: #64b6a8;
    color: #fff;
  }

  .icon {
    /* width: 136px; */
    height: 36px;
  }
}

.Hpage {
  position: relative;
  margin-top: 230px;
  font-size: 18px;
  width: 1200px;
  margin-bottom: 65px;
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }

  /deep/.el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    color: #606266;
  }
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
	        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .but {
      position: relative;
      left: 380px;
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.xuan {
  color: #64b6a8;
  font-weight: 600;
}

.ti {
  color: #333333;
  font-weight: 400;
}

.form {
  width: 700px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333;

  .name {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 35px;
  }

  .list {
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;

      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;

        span {
          color: red;
        }
      }

      .right {
        display: inline-block;
        width: 550px;

        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }

        .el-select {
          width: 99%;

          /deep/.el-input__inner {
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }

        /deep/.el-radio__label {
          font-size: 18px;
        }

        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #333;
        }
      }

      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;

        .el-textarea {
          font-size: 18px;
        }

        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }

        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }
      }
    }

    .tuLi {
      border: 0;
    }
  }
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  .louceng {
    position: absolute;
    width: 430px;
    height: 230px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .lou {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #e0e0e0;
    padding-top: 20px;

    span {
      font-size: 18px;
      color: #333;
      margin-left: 15px;
      margin-right: 20px;
    }

    div {
      display: inline-block;
      width: 80px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      color: #666666;
      margin-left: 10px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .xuan {
      color: #64b6a8;
      background: #ffffff;
      border: 1px solid #64b6a8;
    }
  }

  .ceng {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #e0e0e0;
    padding-top: 20px;

    div {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 10px;
      overflow: hidden;

      /deep/.el-input__inner {
        border: 0;
        background-color: #f2f2f2;
        color: #999999;
        font-size: 16px;
      }
    }

    span {
      vertical-align: middle;
      font-size: 22px;
      color: #333;
    }
  }

  .wanc {
    width: 100%;
    height: 60px;
    font-size: 22px;
    background-color: #64b6a8;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
  }
}

.xieyi {
  width: 550px;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 70px;
  margin-bottom: 25px;

  /deep/.el-checkbox__inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    width: 6px;
    height: 13px;
    left: 9px;
    top: 4px;
    border-left: 0;
    border-top: 0;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #64b6a8;
    border-color: #64b6a8;
  }

  p {
    width: 450px;
    display: inline-block;
  }
}

.queding {
  width: 300px;
  height: 60px;
  background: #64b6a8;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  margin-bottom: 50px;
  cursor: pointer;
}

.neirong {
  /deep/.el-textarea__inner {
    height: 130px;
  }
}

/deep/.el-tabs__header {
  width: 190px;
  left: 32%;
}

/deep/.el-tabs__item {
  font-size: 18px;
}

/deep/.is-active {
  font-weight: 600;
  color: #64b6a8;
}

/deep/.el-tabs__active-bar {
  background-color: #64b6a8;
  height: 3px;
}

.erweima {
  position: fixed;
  right: 20%;
  top: 15%;
  z-index: 99999;
  background-color: #f7f0f0;
  padding: 20px;
  border-radius: 5px;
  display: flex !important;
  margin-right: 10px !important;

  div {
    margin-right: 10px !important;
    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    align-items: center;

    img {
      width: 150px;
      height: 150px;
    }

    span {
      color: #000;
    }
  }
}

// tututututu
.tuLi {
  border: 0;
}

.tu {
  position: relative;
  margin-top: 12px;
  width: 100%;
  font-size: 18px;
  display: flex;

  img {
    object-fit: contain;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
  }

  video {
    object-fit: contain;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .info {
    height: 136px;
    max-width: 220px;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    padding-left: 18px;

    .info-title {
      color: #64b6a8;
      font-size: 24px;
      line-height: 32px;
      font-weight: 600;
    }

    .info-desc {
      color: #333;
      font-size: 18px;
      line-height: 24px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .info-operate {}
  }

  .el-textarea {
    font-size: 18px;
  }

  .textarea {
    /deep/.el-textarea__inner {
      width: 698px;
      min-height: 80px !important;
      line-height: 25px;
      outline: none;
      padding: 10px 13px 30px 13px;
      overflow-y: visible;
    }
  }

  .zi {
    position: absolute;
    font-size: 14px;
    z-index: 99;
    right: 10px;
    bottom: 10px;
    color: #999999;
  }
}

.tuLi {
  border: 0;
  margin-bottom: 20px;
}

/deep/ .el-upload--picture-card {
  border: 1px dashed #c0ccda !important;
}

.txt2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
